<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5手机移动端大转盘抽奖代码_大头网</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
<style>
dialog::backdrop {
    background: rgba(0,0,0, 0.3);
}
	.tips{ border: solid 1px red;  overflow: auto; float: left;margin-top: -50%; border-radius: 10px; width: 60%;padding: 10px;}

	.num_select{font-size: 1.2rem;}
	.confirm{background: green; border: 1px groove  ; text-shadow: aquamarine; width: 100%;padding: 4px; color: white; font-size: 1.1rem;  }
	.confirm:active{ font-size: 1.2rem;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/service.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/awardRotate.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">
var  tipsDialog;//提示对话框
var  win_num;//中奖号码
var  my_num;//我选中的号码
var loginDialog;
var turnplate={
		restaraunts:[],				//大转盘奖品名称
		colors:[],					//大转盘奖品区块对应背景颜色
		outsideRadius:150,			//大转盘外圆的半径194
		textRadius:155,				//大转盘奖品位置距离圆心的距离
		insideRadius:68,			//大转盘内圆的半径
		startAngle:0,				//开始角度
		
		bRotate:false				//false:停止;ture:旋转
};

$(document).ready(function(){

	//动态添加大转盘的奖品与奖品区域背景颜色
	turnplate.restaraunts = ["1M", "2M", "3M", "4M", "5M", "6M", "7M ", "8M", "9M", "10M", "11M", "12M"];
	turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6","#FFFFFF", "#FFF4D6"];

	
	var rotateTimeOut = function (){
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:2160,
			duration:8000,
			callback:function (){
				 tipsDialog= document.getElementById("tips");//提示对话框
				tipsDialog.open=true;
				tipsDialog.textContent='网络超时，请检查您的网络设置！';
			}
		});
	};
	
	
	//旋转转盘 item:奖品位置; txt：提示语;
	var rotateFn = function (item, txt){
		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
		if(angles<270){
			angles = 270 - angles; 
		}else{
			angles = 360 - angles + 270;
		}
		$('#wheelcanvas').stopRotate();
		$('#wheelcanvas').rotate({
			angle:0,
			animateTo:angles+1800,
			duration:1000,//15000
			callback:function (){
			//	alert(txt);
			   var Congratulate;
			   var numarr=my_num.split(",");
			   console.log()
			    for (var i=0;i<numarr.length;i++) {
			    
			    	if(numarr[i]==win_num){
			    		Congratulate="恭喜您，中奖了！"
			    		break;
			    	}else{
			    		Congratulate="很遗憾，您未中奖！"
			    	}
			    }
				tipsDialog= document.getElementById("tips");//提示对话框
				tipsDialog.innerHTML= "<p class='num_select'><h1><img src='images/14.png'/>中奖提醒:</h1></p><br>"+
									  "<p class='num_select'><h2>"+Congratulate+"</h2></p><br>"+
									  "<p class='num_select'><h2>当前中奖号码为："+txt.replace('M','号')+"</h2></p><br>"+
									  "<p class='num_select'><h2>您所选中的号码是："+my_num+"</h2></p><br>"+
									  "<p class='num_select'><h2>本次奖金：9￥，已发放</h2></p><br>"+
				                      "<input class='confirm' type='button' value='确定'  id='ok'>";
				$('#ok').click(function (){
				   tipsDialog.close();
				});
				
				tipsDialog.showModal();
				turnplate.bRotate = !turnplate.bRotate;
			}
		});
	};
 
	$('.pointer').click(function (){
		
		loginDialog=document.getElementById("login");//提示对话框
		var btnlogin=document.getElementById("btnlogin");//提示对话框
		$('#btnlogin').click(function (){
			  login();
			});
		loginDialog.showModal();
	});
	function login(){
		var nm=$('#userphone').val();
		var np=$('#userpwd').val();
		var param="u_name="+nm+"&u_pass="+np;
		
		send(sever_path_local+"/login?"+param, null, function(){
			if(http_request_sel.readyState == 4) {
 				if(http_request_sel.status == 200) {
 					var str = http_request_sel.responseText;
 					//alert("返回数据为：" +  JSON.parse(str));
 					var list=JSON.parse(str);
 					//var list = eval(str);
 					
 					if(list[0].ok){
 						loginDialog.close();
 						connection(nm,np);
 						showSelectNum();
 					}else{
 						alert(list[0].msg);
 					}
 				} else if(http_request_sel.status == 404) {
 					alert("请求资源不存在！");
 				} else {
 					alert("数据请求失败，错误状态为：" + http_request_sel.status);
				}
			}
		}, 2);
	
	}
	
	function showSelectNum(){
		//获取未被选取的号码
		var select_num_html="<p class='num_select'><h2><img src='images/9.png'/>请选择您的号码:</h2></p><br>"+
							"<p class='num_select'><input class='num'  type='radio' name='num' value='1,2,3'  >1,2,3(3.0￥)</p>"+
							"<p class='num_select'><input class='num'  type='radio' name='num' value='4,5,6'  >4,5,6(3.0￥)</p>"+
							"<p class='num_select'><input class='num'  type='radio' name='num' value='7,8,9'  >7,8,9(3.0￥)</p>"+
							"<p class='num_select'><input class='num'  type='radio' name='num' value='10,11,12' >10,11,12(3.0￥)</p><br>"+
							"<p class='num_select'>奖金：9￥</p><br>"+
						    "<input class='confirm' type='button' value='确定' id='confirm_num'/>";
		//提示选择抽奖数字，选择完成后等待其他人加入，加入完成后进入抽奖
	    	tipsDialog= document.getElementById("tips");//提示对话框
			tipsDialog.innerHTML=select_num_html;
				$('#confirm_num').click(function (){
					var select=$('input:radio[name="num"]:checked').val();
					
					var	infoDialog= document.getElementById("info");//提示对话框
					if(typeof(select)=="undefined"){ 
					
					     infoDialog.innerHTML="<p class='num_select'><h2><img src='images/9.png'/>请选一组号码</h2></p><br>"+
					     "<input class='confirm' type='button' value='确定' id='info_tips'/>";
					     $('#info_tips').click(function (){
					     	infoDialog.close();
					     });
					     infoDialog.showModal();
					  return;
					}else{
						 //我选的号码
						 my_num=select;
						 infoDialog.innerHTML="<br><br><p class='num_select'><h2><img src='images/9.png'/>您选的号码是："+select+"</h2></p><br><br>"+
					     "<input class='confirm' type='button' value='确定并进入排队' id='info_tips'/> <input class='confirm' type='button' value='取消' id='info_tips_rest'/>";
					     $('#info_tips').click(function (){
					     	infoDialog.close();
					     	//确定完成之后显示进入用户
					        tipsDialog.close();
					     	
					     	//点击进入排队
					     	infoDialog.innerHTML="<br><br><p class='num_select'><h2><img src='images/9.png'/>正在等待其他人员进入</h2></p><br><br>"+
					     	"<div id='user_group'><p class='num_select'><h2>玩家："+onlineUser.name+"已进入。("+my_num+")</h2></p><br><br></div>";
					     	var user_group=$('#user_group');
					     		
					     	//获取玩家数据
						     getGroup(my_num);
					     	//检测进入用户
				     		var gruopTask= setTimeout(function(){
				             	if("undefined"!= typeof(GROUP_DATA)){
				             		user_group.append("<p class='num_select'><h2>玩家："+GROUP_DATA.msg.msg+"已进入。（）</h2></p><br><br>")
				             	    //开始抽奖
							        start();
				             		clearTimeout(gruopTask) ;
				             	}
				             	
				             },1000);
					     	infoDialog.showModal();
					     });
					     $('#info_tips_rest').click(function (){
					     	infoDialog.close();
					     	return;
					     });
					     
					      infoDialog.showModal();
					      
					}
				  
				});
				tipsDialog.showModal();
	}
	// setTimeout(function autoStart () {
		 // start();
	//	tipsDialog=document.getElementById("tips");//提示对话框
	//	tipsDialog.open=true;//显示对话框
	//},1000);
	
	function start(){
	    if(turnplate.bRotate)return;
		turnplate.bRotate = !turnplate.bRotate;
		//获取随机数(奖品个数范围内)
		var item = rnd(1,turnplate.restaraunts.length);
		//奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
		rotateFn(item, turnplate.restaraunts[item-1]);
		/* switch (item) {
			case 1:
				rotateFn(252, turnplate.restaraunts[0]);
				break;
			case 2:
				rotateFn(216, turnplate.restaraunts[1]);
				break;
			case 3:
				rotateFn(180, turnplate.restaraunts[2]);
				break;
			case 4:
				rotateFn(144, turnplate.restaraunts[3]);
				break;
			case 5:
				rotateFn(108, turnplate.restaraunts[4]);
				break;
			case 6:
				rotateFn(72, turnplate.restaraunts[5]);
				break;
			case 7:
				rotateFn(36, turnplate.restaraunts[6]);
				break;
			case 8:
				rotateFn(360, turnplate.restaraunts[7]);
				break;
			case 9:
				rotateFn(324, turnplate.restaraunts[8]);
				break;
			case 10:
				rotateFn(288, turnplate.restaraunts[9]);
				break;
		} */
		win_num=item;
		console.log("当前中奖号"+item);
	}
});

function rnd(n, m){
	var random = Math.floor(Math.random()*(m-n+1)+n);
	return random;
	
}


//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
	drawRouletteWheel();
};

function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
	  //根据奖品个数计算圆周角度
	  var arc = Math.PI / (turnplate.restaraunts.length/2);
	  var ctx = canvas.getContext("2d");
	  //在给定矩形内清空一个矩形
	  ctx.clearRect(0,0,422,422);
	  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
	  ctx.strokeStyle = "#FFBE04";
	  //font 属性设置或返回画布上文本内容的当前字体属性
	  ctx.font = '16px Microsoft YaHei';      
	  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
		  var angle = turnplate.startAngle + i * arc;
		  ctx.fillStyle = turnplate.colors[i];
		  ctx.beginPath();
		  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
		  ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
		  ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
		  ctx.stroke();  
		  ctx.fill();
		  //锁画布(为了保存之前的画布状态)
		  ctx.save();   
		  
		  //----绘制奖品开始----
		  ctx.fillStyle = "#E5302F";//文字颜色
		  var text = turnplate.restaraunts[i];
		  var line_height = 17;
		  //translate方法重新映射画布上的 (0,0) 位置
		  ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
		  
		  //rotate方法旋转当前的绘图
		  ctx.rotate(angle + arc / 2 + Math.PI / 2);
		  
		  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
		  if(text.indexOf("M")>0){//流量包
			  var texts = text.split("M");
			  for(var j = 0; j<texts.length; j++){
			  	  var img;
			  	if(texts[0]==1){
			  		img= document.getElementById("icon1");
			  		 ctx.fillStyle = "#ff00ff";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==2){
			  		img= document.getElementById("icon2");
			  		 ctx.fillStyle = "#ff0066";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==3){
			  		img= document.getElementById("icon3");
			  		 ctx.fillStyle = "#00ff00";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==4){
			  		img= document.getElementById("icon4");
			  		 ctx.fillStyle = "#33ffff";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==5){
			  		 img= document.getElementById("icon5");
			  		 ctx.fillStyle = "#9900ff";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==6){
			  		img= document.getElementById("icon6");
			  		 ctx.fillStyle = "#FF0000";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==7){
			  		img= document.getElementById("icon7");
			  		 ctx.fillStyle = "#9B30FF";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==8){
			  		img= document.getElementById("icon8");
			  		 ctx.fillStyle = "#191970";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==9){
			  		img= document.getElementById("icon9");
			  		 ctx.fillStyle = "#0000FF";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==10){
			  		img= document.getElementById("icon10");
			  		 ctx.fillStyle = "#00EE76";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==11){
			  		img= document.getElementById("icon11");
			  		 ctx.fillStyle = "#FF4500";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}else if(texts[0]==12){
			  		img= document.getElementById("icon12");
			  		 ctx.fillStyle = "#660066";//文字颜色
			  		 img.onload=function(){  
						  ctx.drawImage(img,-15,10);      
					  }; 
					  ctx.drawImage(img,-15,10); 
			  	}
				  ctx.font = j == 0?'bold 36px Microsoft YaHei':'26px Microsoft YaHei';
//				  if(j == 0){
					  ctx.fillText(texts[j], -ctx.measureText(texts[j]+"M").width / 4, j * line_height);
//				  }else{
//					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 4, j * line_height);
//				  }
				  
					 
			  }
		  }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 
			  text = text.substring(0,6)+"||"+text.substring(6);
			  var texts = text.split("||");
			  for(var j = 0; j<texts.length; j++){
				  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
			  }
		  }else{
			  //在画布上绘制填色的文本。文本的默认颜色是黑色
			  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
		  }
		  
		  //添加对应图标
		  if(text.indexOf("闪币")>0){
			  var img= document.getElementById("shan-img");
			  img.onload=function(){  
				  ctx.drawImage(img,-15,10);      
			  }; 
			  ctx.drawImage(img,-15,10);  
		  }else if(text.indexOf("谢谢参与")>=0){
			  var img= document.getElementById("sorry-img");
			  img.onload=function(){  
				  ctx.drawImage(img,-15,10);      
			  };  
			  ctx.drawImage(img,-15,10);  
		  }
		  //把当前画布返回（调整）到上一个save()状态之前 
		  ctx.restore();
		  //----绘制奖品结束----
	  }  
	 
  } 
  

}
function hideDialog(dialog){
		setTimeout(function(){
			dialog.open=false;
			dialog.clone();
		},2000);
	}
</script>

</head>
<body style="background:#e62d2d;overflow-x:hidden;">
<br>
<!-- 代码 开始 -->
<img src="images/1.png" id="icon1" style="display:none;" />
<img src="images/2.png" id="icon2" style="display:none;" />
<img src="images/3.png" id="icon3" style="display:none;" />
<img src="images/4.png" id="icon4" style="display:none;" />
<img src="images/5.png" id="icon5" style="display:none;" />
<img src="images/6.png" id="icon6" style="display:none;" />
<img src="images/7.png" id="icon7" style="display:none;" />
<img src="images/8.png" id="icon8" style="display:none;" />
<img src="images/9.png" id="icon9" style="display:none;" />
<img src="images/10.png" id="icon10" style="display:none;" />
<img src="images/11.png" id="icon11" style="display:none;" />
<img src="images/12.png" id="icon12" style="display:none;" />
<div class="banner">
	<div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;">
		<canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
		<img class="pointer" src="images/turnplate-pointer.png"/>
	</div>
</div>
<!-- 代码 结束 -->
<div>
	 <dialog id="tips" class="tips" >
	 </dialog>
	 <dialog id="info" class="tips" >
	 </dialog>
	 <style>
	 	.btn {
			width: 330px;
			height: 40px;
			margin-top: 20px;
			border-radius: 8px;
			background: #4ca9ff;
			color: #ffffff;
			border: 0px solid #4ca9ff;
			font-size: 18px;
		}
			.in {
			width: 300px;
			height: 40px;
			border-radius: 4px;
			border: 1px solid #4ca9ff;
			background-size: 24px;
			background-position: center left;
			background-repeat: no-repeat;
			padding-left: 32px;
			font-size: 18px;
		}
	 </style>
	 <dialog id="login"  >
		<div align="center">
			<div class="pro_icon"><p><h1>登陆</h1></p></div><br/><br/>
			<div><input class="in" type="text" placeholder="用户手机号码" id="userphone" /> </div>
			<div><input class="in" type="password" placeholder="登录密码" id="userpwd" /> </div>
			<div><button class="btn" id="btnlogin">登录</button></div>
		</div>
	 </dialog>
</div>
   
</body>
</html>